<template>
  <div class="page-container">
    <div class="page-header">
      <div class="page-tile">
        <el-button class="icon-button back-button" style="margin-right: 10px;" @click="$router.back()">
          <i class="el-icon-arrow-left" style="font-size: 12px"></i>
        </el-button>
        <span style="display:flex">
          <link-button :isName="true" :content="$t('resource.Daas')" @click="$router.push({ name: 'ResourceDaas' })" />
          / {{basicFormData.name || $t('common.Create') + $t('resource.Daas')}}
        </span>
        <i v-if="false" class="iconfont iconzhongyiicon_gaojing"></i>
      </div>
      <div class="left-wrapper"></div>
      <div class="right-wrapper"></div>
    </div>
    <el-scrollbar class="page-content">
      <div class="content-wrapper">
        <el-card class="content-info" :body-style="{ padding: '0px' }" v-loading="loading">
          <el-steps :active="currentStep" style="margin-left: 150px;">
            <el-step>
              <template #icon v-if="currentStep < 1">
                <div class="el-step__icon-inner">1</div>
                <div class="step-label">{{ $t('resource.BasicOption') }}</div>
              </template>
              <template #icon v-else>
                <i class="el-step__icon-inner is-status el-icon-check"></i>
                <div class="step-label">{{ $t('resource.Finished') }}</div>
              </template>
            </el-step>
            <el-step>
              <template #icon v-if="currentStep < 2">
                <div class="el-step__icon-inner">2</div>
                <div class="step-label">{{ $t('resource.ADOption') }}</div>
              </template>
              <template #icon v-else>
                <i class="el-step__icon-inner is-status el-icon-check"></i>
                <div class="step-label">{{ $t('resource.Finished') }}</div>
              </template>
            </el-step>
          </el-steps>
          <el-form ref="BasicForm" :model="basicFormData" :rules="basicFormRule" label-width="120px" v-if="currentStep === 0">
            <el-form-item :label="$t('common.name')" prop="name">
              <el-input v-model="basicFormData.name" style="width: 40%" @keyup.enter.native="submit"></el-input>
            </el-form-item>
            <el-form-item :label="$t('common.manageAddress')" prop="manage_address">
              <el-input v-model="basicFormData.manage_address" style="width: 40%" @keyup.enter.native="submit"></el-input>
            </el-form-item>
            <el-form-item :label="$t('resource.ManageAccount')" prop="manage_account">
              <el-input v-model="basicFormData.manage_account" style="width: 40%" @keyup.enter.native="submit"></el-input>
            </el-form-item>
            <el-form-item :label="$t('resource.ManagePassword')" prop="manage_password">
              <el-input type="password" v-model="basicFormData.manage_password" show-password style="width: 40%" @keyup.enter.native="submit"></el-input>
            </el-form-item>
            <el-form-item :label="$t('resource.BelongTenant')" prop="tenant">
              <el-select v-model="basicFormData.tenant" :placeholder="$t('resource.belongTenantSelectPlaceholder')" style="width: 40%;" @keyup.enter.native="submit">
                <el-option
                  v-for="tenant in tenantList"
                  :key="tenant.id"
                  :label="tenant.name"
                  :value="tenant.id">
                  {{tenant.name}}
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-form ref="ADForm" :model="adFormData" :rules="adFormRule" label-width="120px" v-if="currentStep === 1">
            <el-form-item :label="$t('resource.ADController')" prop="ad_adress">
              <el-input v-model="adFormData.ad_adress" style="width: 40%" @keyup.enter.native="submit"></el-input>
            </el-form-item>
            <el-form-item :label="$t('resource.ManagerAccount')" prop="ad_account">
              <el-input v-model="adFormData.ad_account" style="width: 40%" @keyup.enter.native="submit"></el-input>
            </el-form-item>
            <el-form-item :label="$t('resource.ManagerPassword')" prop="ad_password">
              <el-input type="password" v-model="adFormData.ad_password" show-password style="width: 40%" @keyup.enter.native="submit"></el-input>
            </el-form-item>
            <el-form-item :label="$t('resource.ADDN')" prop="ad_dn">
              <el-input v-model="adFormData.ad_dn" style="width: 40%" @keyup.enter.native="submit"></el-input>
            </el-form-item>
            <el-form-item :label="$t('resource.ADFiliter')" prop="ad_filiter">
              <el-input v-model="adFormData.ad_filiter" style="width: 40%" @keyup.enter.native="submit"></el-input>
            </el-form-item>
          </el-form>
          <el-divider></el-divider>
          <div class="content-footer">
            <el-button v-if="currentStep === 0" type="primary" @click="stepToSecond">{{ `${ $t('common.NextStep') }${ $t('common.Colon') }${ $t('resource.ADOption') }` }}</el-button>
            <el-button v-if="currentStep === 1" @click="currentStep = 0">{{ `${ $t('common.PrevStep') }${ $t('common.Colon') }${ $t('resource.BasicOption') }` }}</el-button>
            <el-button v-if="currentStep === 1" @click="handleClose">{{ $t('common.cancel') }}</el-button>
            <el-button v-if="currentStep === 1" type="primary" @click="submit" :disabled="loading">{{ $t('common.confirm') }}确定</el-button>
          </div>
        </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import LinkButton from '../../components/Basic/Button/LinkButton.vue';
export default Vue.extend({
  components: {
    LinkButton
  },
  data() {
    return {
      loading: false,
      poolList: [],
      tenantList: [],
      currentStep: 0,
      basicFormData: {
        name: "",
        manage_address: "",
        manage_account: "",
        manage_password: "",
        tenant: null
      },
      adFormData: {
        ad_adress: "",
        ad_account: "",
        ad_password: "",
        ad_dn: "",
        ad_filiter: ""
      },
      basicFormRule: {
        name: [
          { required: true, message: (this as any).$t('resource.daasNameRequired'), trigger: 'blur' },
          { max: 50, message: (this as any).$t('resource.daasNameMax'), trigger: 'blur' }
        ],
        manage_address: [
          { required: true, message: (this as any).$t('resource.manageAddressRequired'), trigger: 'blur' },
          { max: 50, message: (this as any).$t('resource.manageAddressMax'), trigger: 'blur' }
        ],
        manage_account: [
          { required: true, message: (this as any).$t('resource.manageAccountRequired'), trigger: 'blur' },
          { max: 50, message: (this as any).$t('resource.manageAccountMax'), trigger: 'blur' }
        ],
        manage_password: [
          { required: true, message: (this as any).$t('resource.managePasswordRequired'), trigger: 'blur' },
          { max: 50, message: (this as any).$t('resource.managePasswordMax'), trigger: 'blur' }
        ],
        tenant: [
          { required: true, message: (this as any).$t('resource.tenantRequired'), trigger: 'blur' }
        ]
      },
      adFormRule: {
        ad_adress: [
          { required: true, message: (this as any).$t('resource.adAddressRequired'), trigger: 'blur' },
          { max: 50, message: (this as any).$t('resource.adAddressMax'), trigger: 'blur' },
          { validator: (rule: any, value: any, callback: any) => {
						let rules = /(ldap|ldaps):\/\/([\w.]+\/?)\S*/　;
            if (rules.test(value)) {
              return callback();
            } else {
							 return callback(new Error((this as any).$t('resource.adAddressError')))
            }
          }, trigger: 'blur' }
        ],
        ad_account: [
          { required: true, message: (this as any).$t('resource.adAccountRequired'), trigger: 'blur' },
          { max: 50, message: (this as any).$t('resource.adAccountMax'), trigger: 'blur' }
        ],
        ad_password: [
          { required: true, message: (this as any).$t('resource.adPasswordRequired'), trigger: 'blur' },
          { max: 50, message: (this as any).$t('resource.adPasswordMax'), trigger: 'blur' }
        ],
        ad_dn: [
          { required: true, message: (this as any).$t('resource.adDNRequired'), trigger: 'blur' },
          { max: 50, message: (this as any).$t('resource.adDNMax'), trigger: 'blur' }
        ],
        ad_filiter: [
          { required: true, message: (this as any).$t('resource.adFiliterRequired'), trigger: 'blur' },
          { max: 50, message: (this as any).$t('resource.adFiliterMax'), trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    (this as any).loading = true;
    if ((this as any).$route.params.formData && (this as any).$route.params.formData.id) {
      this.basicFormData = {
        name: (this as any).$route.params.formData.name,
        manage_address: (this as any).$route.params.formData.manage_address,
        manage_account: (this as any).$route.params.formData.manage_account,
        manage_password: (this as any).$route.params.formData.manage_password,
        tenant: (this as any).$route.params.formData.tenant
      };
      this.adFormData = {
        ad_adress: (this as any).$route.params.formData.ad_adress,
        ad_account: (this as any).$route.params.formData.ad_account,
        ad_password: (this as any).$route.params.formData.ad_password,
        ad_dn: (this as any).$route.params.formData.ad_dn,
        ad_filiter: (this as any).$route.params.formData.ad_filiter
      };
      this.currentStep = 0;
    }
    await (this as any).getPoolList();
    await (this as any).getTenantList();
    (this as any).loading = false;
  },
  methods: {
    async getPoolList() {
      (this as any).poolList = await (this as any).$pandaApi.apiGetResourceList({});
    },
    async getTenantList() {
      (this as any).tenantList = await (this as any).$pandaApi.apiGetTenantList({});
    },
    stepToSecond() {
      (this.$refs['BasicForm'] as any).validate((valid: any) => {
        if (valid) {
          (this as any).currentStep = 1;
        }
      });
    },
    submit() {
      (this.$refs['ADForm'] as any).validate((valid: any) => {
        if (valid) {
          (this as any).loading = true;
          (this as any).$pandaApi.apiPostDaasTenantList({
            basicFormData: (this as any).basicFormData,
            adFormData: (this as any).adFormData
          }).then(() => {
            (this as any).$router.back();
          }).finally(() => {
            (this as any).loading = false;
          });
        }
      });
    }
  }
})
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #EFF1F4;

  .page-header {
    height: 60px;
    background-color: #FFFFFF;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #D9D9D9;

    .page-tile {
      color: #031129;
      font-size: 16px;
      margin-left: 20px;
      display: flex;
      align-items: center;

      .back-button {
        width: 24px;
        height: 24px;
        padding: 0px 6px;
      }

      .iconzhongyiicon_gaojing {
        margin-left: 5px;
      }
    }
  }

  .page-content {
    height: calc(100vh - 110px);
    overflow: hidden;
    flex-grow: 1;

    .content-wrapper {
      padding: 15px;

      .content-step {
        width: calc(40% + 150px);
        padding: 30px;
      }

      .content-info {
        margin-bottom: 20px;

        ::v-deep .el-form {
          padding: 30px;
          padding-bottom: 0px;
        }

        ::v-deep .el-form-item {
          margin-right: 40px
        }

        ::v-deep .el-form-item__label, ::v-deep .el-form-item__content {
          color: #999999;
          font-size: 12px;
        }

        ::v-deep .el-form-item__content {
          color: #333333;
        }
      }

      .content-footer {
        margin-bottom: 30px;
        margin-left: 150px;
      }
    }
  }
}

.table-left-options {
  display: flex;
}

.table-right-options {
  display: flex;

  .setting-button {
    margin-right: 10px;
  }
}
</style>
